<template>
    <div>
        <div class="wap-foot">
            <div class="bottom-box">
                <div class="letf-box">
                    <div class="box-item" v-for="(item, index) in tabbar">
                        <div class="box-item-top" v-if="item.itemTop">
                            <div style="position: relative;">
                                <img :src="`/_nuxt/assets/images/img-m/${item.icon}-m.png`" alt="" width="24" height="24">
                            </div>
                        </div>
                        <div @click="handleSel(item.path)">
                            <div class="recommend-png-frame">
                                <img v-if="!item.itemTop" :src="`/_nuxt/assets/images/img-m/${item.icon}-m.png`" alt=""
                                    class="recommend-png">
                            </div>
                            <p class="text">{{ item.name }}</p>
                        </div>
                    </div>
                    <!-- <div class="box-item" @click="handleSel('/following')">
                    <div>
                        <img src="../../../../assets/images/img-m/用户关注.png" alt="" class="recommend-png">
                        <p class="text">关注</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('/following')">
                    <div class="box-item-top">
                        <div style="position: relative;">图标</div>
                    </div>
                    <div>
                        <div class="recommend-png"></div>
                        <p class="text">关注</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('/following')">
                    <div>
                        <img src="../../../../assets/images/img-m/用户关注.png" alt="" class="recommend-png">
                        <p class="text">关注</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('/following')">
                    <div>
                        <img src="../../../../assets/images/img-m/用户关注.png" alt="" class="recommend-png">
                        <p class="text">关注</p>
                    </div>
                </div> -->
                </div>
                <!-- <div class="middle">
                <div class="search-box" @click="handleSel('/MySearch')">
                    <div class="white-bg">
                        <div class="round">
                            <img src="../../../../assets/images/img-m/搜索.png" alt="" class="search-png">
                        </div>
                        <p class="text">搜索</p>
                    </div>
                </div>

            </div>
            <div class="letf-box">
                <div class="box-item">
                    <div>
                        <img src="../../../../assets/images/img-m/上传.png" alt="" class="Upload-png">
                        <p class="text">上传</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('Mypage')">
                    <div>
                        <img src="../../../../assets/images/img-m/我的.png" alt="" class="MY-png">
                        <p class="text">我的</p>
                    </div>
                </div>
            </div> -->
            </div>
        </div>
        <div class="shadow-frame">
            <div class="shadow-item" v-for="item in tabbar">
                <div class="shadow-item-bg" v-if="item.itemTop"></div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const router = useRouter()

const handleSel = (key) => {
    console.log(key);

    if (key == '/MySearch') {
        router.push({
            path: '/MySearch' + key  // 直接使用 key 作为路径
        });
    } else if (key === 'Mypage') {
        router.push({
            path: '/Mypage/' + key
        })
    }
    else {
        router.push({
            path: '/Recommended' + key  // 直接使用 key 作为路径
        });
    }
}

const getImageUrl = (name) => {
  return new URL(`../../assets/images/img-m/${name}-m.png`, import.meta.url).href
}

const tabbar = ref([
  { name: '推荐', itemTop: false, path: '/Recommended', icon: '推荐' },
  { name: '关注', itemTop: false, path: '/following', icon: '关注' },
  { name: '搜索', itemTop: true, path: '/MySearch', icon: '搜索' },
  { name: '上传', itemTop: false, path: '/upload', icon: '上传' },
  { name: '我的', itemTop: false, path: '/Mypage', icon: '我的' }
])





</script>

<style lang="less" scoped>
.shadow-frame {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    z-index: 99;
    height: 80px;
    display: flex;
    justify-content: space-between;

    .shadow-item {
        flex: 1;
        position: relative;

        .shadow-item-bg {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translate(-50%, 60%);
            width: 80%;
            aspect-ratio: 1/1;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 10px gray;
        }
    }
}

.wap-foot {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    z-index: 100;

    .bottom-box {
        width: 100%;
        height: 80px;
        background-color: var(--color-bg);
        display: flex;
        justify-content: space-between;
        box-shadow: var(--color-foot-shadow);

        .text {
            font-size: 18px;
            color: var(--color-text);
        }

        .letf-box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            // border: 1px solid salmon;

            .box-item {
                width: 40%;

                text-align: center;
                font-size: 16px;
                display: grid;
                justify-content: center;
                align-items: center;
                position: relative;

                .box-item-top {
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    transform: translate(-50%, 60%);
                    width: 80%;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background-color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .box-item-top::before {
                    position: absolute;
                    content: "  ";
                    width: 80%;
                    aspect-ratio: 1 / 1;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #eee;
                    border-radius: 50%;
                }

                .recommend-png-frame {
                    width: 24px;
                    height: 24px;
                    margin: 0 auto;

                    .recommend-png {
                        width: 100%;
                        height: 100%;
                    }

                }

                .Upload-png {
                    width: 26px;
                    height: 26px;

                }

                .MY-png {
                    width: 25px;
                    height: 25px;
                }





            }


        }

        .middle {
            width: 20%;
            display: grid;
            justify-content: center;
            align-items: center;
            text-align: center;

            .search-box {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                bottom: 28px;
                background-color: var(--color-bg);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: var(--color-foot-shadow);

                .white-bg {
                    width: 60px;
                    height: 40px;
                    background-color: var(--color-bg);
                    position: relative;
                    top: 8px;


                    .text {
                        color: var(--color-text);
                        font-size: 18px;
                        font-weight: 500;

                    }


                    .round {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--color-bg-3b);
                        position: relative;
                        bottom: 10PX;
                        left: 8px;

                        .search-png {
                            width: 25px;
                            height: 25px;
                        }
                    }
                }




            }

            .search-box::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;

                background-color: transparent;

                z-index: 1;
            }


        }


    }
}
</style>